<template>
  <div v-if="currentGroup" class="pv16 pr16">
    <div class="flex-center-between">
      <div>
        <div class="fs16 fw500">{{ currentGroup.institutionTypeName }}</div>
        <div class="fs12 tc-l2 mt8">{{ currentGroup.institutionTypeIntroduce }}</div>
      </div>
      <a-button :disabled="(currentGroup && currentGroup.level === 1) || !currentGroup" type="primary" @click="goAdd">添加制度</a-button>
    </div>
    <div class="mt24">
      <a-table :dataSource="dataSource" :columns="columns" rowKey="id" @change="handleTableChange">
        <template slot="gmtCreate" slot-scope="text">
          {{ $dayjs(text).format("YYYY-MM-DD") }}
        </template>
        <template slot="isOpen" slot-scope="text">
          {{ text ? "开启" : "关闭" }}
        </template>
        <template slot="action" slot-scope="text, record">
          <a-space>
            <span v-if="record.isOpen" class="tc-theme pointer" @click="doClose(record.id)">关闭</span>
            <span v-else class="tc-theme pointer" @click="doOpen(record.id)">开启</span>
            <span class="tc-theme pointer" @click="goEdit(record)">编辑</span>
            <a-popconfirm title="确认要删除吗？" @confirm="doDelete(record.id)">
              <span class="tc-theme pointer">删除</span>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { columns } from "./funcs";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    companyId: {
      type: String,
      default: null
    },
    currentGroup: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      columns,
      dataSource: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      }
    };
  },
  computed: {},
  watch: {
    companyId() {
      this.pagination.current = 1;
      this.onSearchChange();
    },
    currentGroup: {
      handler() {
        this.pagination.current = 1;
        this.onSearchChange();
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.onSearchChange();
  },
  methods: {
    goEdit(record) {
      localStorage.setItem("tempZhidu", JSON.stringify(record));
      this.$router.push(`/admin/zhidugongshi/edit?id=${record.id}&cId=${this.companyId}&tId=${this.currentGroup.id}`);
    },
    goAdd() {
      this.$router.push(`/admin/zhidugongshi/edit?cId=${this.companyId}&tId=${this.currentGroup.id}`);
    },
    doDelete(institutionId) {
      this.$request({
        url: `/hr/api/v1/institutions/${institutionId}`,
        method: "delete"
      })
        .then((res) => {
          this.$message.success("已删除");
          this.onSearchChange();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    doOpen(institutionId) {
      this.$request({
        url: `/hr/api/v1/institutions/openInstitution`,
        method: "put",
        data: {
          institutionId
        }
      })
        .then((res) => {
          this.$message.success("已开启");
          this.onSearchChange();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    doClose(institutionId) {
      this.$request({
        url: `/hr/api/v1/institutions/closeInstitution`,
        method: "put",
        data: {
          institutionId
        }
      })
        .then((res) => {
          this.$message.success("已关闭");
          this.onSearchChange();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.onSearchChange();
    },
    onSearchChange() {
      this.$request({
        url: `/hr/api/v1/institutions/selectByTypeIdAndCompanyId`,
        params: {
          companyId: this.companyId,
          institutionTypeId: this.currentGroup.id,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      })
        .then((res) => {
          this.dataSource = res.data.entities;
          this.pagination.total = res.data.entityCount;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
